<template>
  <div style="overflow: auto;">
  <el-container class="aside">
    <el-container class="main">
      <el-header style="height: 40%;">
        <div class="main_header">
          <el-avatar :size="120" style="margin-top: 50px;">
          <img :src='url'/>
        </el-avatar>
        <div>
          <span style="font-size: 36px; font: bold;">{{favoriteNum[0].userName}}</span>
          <i class="el-icon-male" v-if='favoriteNum[0].userSex==1'></i>
          <i class="el-icon-female" v-else="favoriteNum[0].userSex==2"></i>
        </div>
        <div style="color: rgb(94, 90, 90);">
          <i class="el-icon-collection">100</i>
          <i class="el-icon-watch">{{favoriteNum[0].bytime | timefilters}}</i>
          <i class="el-icon-location-information">中国</i>
        </div>
         </div>
      </el-header>
      <el-main>
        <div class="main_content">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="float: left;">最近的内容</span>
              <el-button style="float: right; padding: 3px 0" type="text"  @click="myinvite()">更多</el-button>
            </div>
            <div v-for="(item,index) in listDate1" :key="index" v-if="index<6" class="text item">
              <div class="card_item" @click="btnhead(item.inviteCode)">
               <i class="el-icon-paperclip" 
               style="
               width: 100px; 
               float: left;
               white-space: nowrap;
               text-overflow: ellipsis; 
                overflow: hidden;" id="item_text">{{item.inviteTitle}}</i>
               <i class="el-icon-timer" style="float: right;">创建时间：{{item.bytime|timefilters}}</i>
             </div>
             </div>
          </el-card>
        </div>
        <div class="main_content">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span  style="float: left;">最近的收藏</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="shouchang()">更多</el-button>
            </div>
            <div v-for="(item,index) in listDate" :key="index" v-if="index<7" class="text item">
             <div class="card_item"  @click="btnhead(item.inviteCode)">
              <i class="el-icon-paperclip" 
              style="
              width: 100px; 
              float: left;
              white-space: nowrap;
              text-overflow: ellipsis; 
              overflow: hidden;" id="item_text">{{item.inviteTitle}}</i>
              <i class="el-icon-timer" style="float: right;">创建时间：{{item.bytime|timefilters}}</i>
            </div>
            </div>
          </el-card>
        </div>
      </el-main>
      <div style="width: 100%; height: 100px; background: rgba(20, 20, 20, 0.945); text-align: center; line-height: 50px; color: #fff;">
          <span>Greatyu©2020-2300|Goodbin 嗨聊校园|电话：13974089912|QQ:1062837265</span>
      </div>
    </el-container>
  </el-container>
</div>

</template>
</script>
<script>
import API from "@/api/user.js";
import SC from '@/api/shouc.js';
import CATE from '@/api/cate.js';
export default {
  filters: {
    timefilters(val) {
      if (val == null || val == "") {
        return "暂无时间";
      } else {
        let d = new Date(val);   //val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
       let times=d.getFullYear() + '-' + month + '-' + day;
        return times;
      }
    }
  },
  
  data() {
    return {
      userCode1: "",
      userCode: "",
      postNum: 1,
      replyNum: 1,
      listDate:[],
      listDate1:[],
      
      time:"",
      favoriteNum: [{
        userName:"",
        userSex:1
      }],
      value: "",
      userName: "",
      url: "setup.png",
      name: "asdfadf"
      // num: [{count, text: "累计发帖" }, {count, text: "累计回帖" }, {count, text: "累计收藏" }]
    };
  },
  mounted() {
    this.userName = sessionStorage.getItem("userName");
    this.url = sessionStorage.getItem("userUrl");
    this.userCode = sessionStorage.getItem("userCode");
    console.log("userCode:" + this.userCode);
    this.getData();
        },
  methods: {
    btnhead(val){
        console.log(val);
        // this.$router.go(0)
        this.$router.replace({path:'/contents',
        query:{
          inviteCode:val
          }})
      },
    getData() {
      let obj = {
        userCode: this.userCode
      };
      this.$axios.post(API.postNum, obj).then(res => {
        if (res.data.responseCode === 200) {
          this.postNum = res.data.data;
         
          
        } else {
          this.$message.error("查询失败失败");
          res.data.data.list;
        }
      });
      let obj1 = {
        comment_id: this.userCode
      };
      this.$axios.post(API.replyNum, obj1).then(res => {
        if (res.data.responseCode === 200) {
          this.replyNum = res.data.data;
          
        } else {
          this.$message.error("查询失败失败");
          res.data.data.list;
        }
      });

      this.$axios.post(API.list, obj).then(res => {
        if (res.data.responseCode === 200) {
          this.favoriteNum = res.data.data.list;
        } else {
          this.$message.error("查询失败失败");
          res.data.data.list;
        }
      });

     
        //模块1
         this.$axios
            .post(SC.getShouc, obj)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.listDate=res.data.data;
              } else {
                 this.$message.error('没有数据');
                //  res.data.data.list
              }
            });

            this.$axios
            .post(CATE.getInvitaList, obj)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.listDate1=res.data.data.list;
              } else {
                 this.$message.error('没有数据');
                //  res.data.data.list
              }
            });
             

            
    },
    shouchang() {
      this.$router.push("/mysc");
    },
    myinvite() {
      this.$router.push("/myinvite");
    },
    edit(){
        this.$router.push('/edit')
    },
  }
};
</script>

<style scoped>
.main_header{
  width: 100%;
  height: 40%;
  text-align: center;
  margin: 0px auto;
}
.medium {
  margin: -70px;
}

.count {
  margin-top: 50px;
  font-size: 30px;
}

.el-calendar {
  background-color: #fff;
  height: 58%;
}
.el-calendar-table .el-calendar-day {
  height: 32px;
}
.el-menu {
  
}
.avatar {
  margin-top: 10px;
}
.name {
  margin-top: 10px;
}
.aside,
.main {
  height: 720px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  color: #333;
  
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}



.box-card {
width: 100%;
height: 100%;
}
.main_content {
  float: left;
  width: 45%;
  margin-left: 3%;
  height: 300px;
}

.card_item{
  display: flex;
  height: 20px;
   line-height: 20px; 
   cursor: pointer;
   width: 100%;
   border-bottom: 0.5px solid rgba(0, 0, 0, 0.329);
}
 .card_item:hover{
   color: rgb(4, 0, 255);
 }

 
</style>
<style>
/* @import url(../login/reset.css);
#app {
  margin: 0;
  padding: 0;
} */

.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  
</style>
